<template>
  <u-popup :show="empowerShow" mode="center">
    <view class="empowerBox">
      <view class="empower_imgBox">
        <image class="empowerImg" src="../../static/my/empower.png"></image>
      </view>
      <view class="empower_text1">
        <view>为了让您获得更好的体验~</view>
        <view>我们需要申请获取以下权限</view>
      </view>
      <view class="empower_text2">
        <view>·获取你的公开信息（昵称、头像等）</view>
        <view>·访问你的相机或本地相册</view>
      </view>
      
      <button open-type="agreePrivacyAuthorization"
       @agreeprivacyauthorization="agreeprivacyauthorization" style="border: none;" class="empower_btn">授权</button>
      <view class="empower_agreement">
        <radio class="voucher_agreement_radio" color="#4591E6"
          :checked="termChecked" @tap="termCheckedChange" />
        <view class="voucher_agreement_title voucher_agreement_title1">阅读</view>
        <view class="voucher_agreement_title voucher_agreement_title2"
        @tap="toNav('/pages/my/termInfo?type=0')">用户协议</view>
        <view class="voucher_agreement_title voucher_agreement_title1">和</view>
        <view class="voucher_agreement_title voucher_agreement_title2"
        @tap="toNav('/pages/my/termInfo?type=1')">隐私协议</view>
      </view>
    </view>
  </u-popup>
</template>

<script setup>
import { ref } from 'vue';
import {defineProps, defineEmits} from 'vue';
import { checkLogin } from '@/common/js/method.js'

const props = defineProps(['empowerShow']);
const emit = defineEmits(['close'])

// 同意协议
const termChecked = ref(false);
function termCheckedChange() {
  termChecked.value = !termChecked.value;
}
// 授权弹窗
function agreeprivacyauthorization() {
	if(!termChecked.value) {
		uni.showToast({
			title: '请阅读并勾选用户协议',
			icon: 'none',
		})
		return;
	}
   checkLogin();
   emit('close');
}
</script>

<style lang="less" scoped>
/deep/ .u-popup__content {
	border-radius: 40rpx;
}
.empowerBox {
	border-radius: 40rpx;
	background-color: #ffffff;
	padding: 32rpx 32rpx 64rpx;
}
.empower_imgBox {
  display: flex;
  justify-content: center;
  align-items: center;
}
.empowerImg {
	width: 326rpx;
	height: 240rpx;
}
.empower_text1 {
	margin: 32rpx 0;
	view {
		text-align: center;
		font-size: 32rpx;
		font-weight: 700;
		letter-spacing: 0;
		line-height: 46rpx;
		color: rgba(56, 56, 56, 1);
		margin-bottom: 16rpx;
	}
}
.empower_text2 {
	view {
		text-align: left;
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 0;
		line-height: 40rpx;
		color: rgba(166, 166, 166, 1);
		margin-bottom: 14rpx;
	}
}
.empower_btn {
	margin: 60rpx 0 32rpx;
	opacity: 1;
	border-radius: 200rpx;
	background: rgba(69, 145, 230, 1);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 32rpx 0;
	font-size: 32rpx;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 46rpx;
	color: rgba(255, 255, 255, 1);
}
.empower_agreement {
	display: flex;
	justify-content: center;
	align-items: center;
}
.voucher_agreement_radio {
	transform:scale(0.8)
}
.voucher_agreement_title {
	font-size: 24rpx;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 34rpx;
}
.voucher_agreement_title1 {
	color: rgba(166, 166, 166, 1);
}
.voucher_agreement_title2 {
	margin-left: 10rpx;
	color: rgba(69, 145, 230, 1);
	}
</style>